import { http } from '@/plugins/axios'
import router from '@/plugins/router'
import XEUtils from "xe-utils";
const storage = useStorage()


export default async () => {
    const categories = ref()
    // 方法
    const fillCates = async () => {
        categories.value = await http.request({
            url: `category/list`,
            method: 'get'
        })
        // console.log(categories.value)
    }

    await fillCates()

    // 表单配置
    const serveApiUrl = import.meta.env.VITE_API_URL
    const gridOptions = reactive<VxeGridProps<RowVO>>({
        border: "full",
        showHeaderOverflow: true,
        showOverflow: true,
        keepSource: true,
        autoResize: true,
        size: "small",
        expandConfig: {
            trigger: "row",
            showIcon: true,
            expandRowKeys: [1, 2],
            iconOpen: "vxe-icon--caret-bottom",
            iconClose: "vxe-icon--caret-top",
        },
        formConfig: {
            titleWidth: 120,
            titleAlign: "right",
            items: [
                {
                    field: "user_id",
                    title: "创建人ID",
                    span: 6,
                    titlePrefix: {
                        useHTML: true,
                        message: "模糊查询",
                        icon: "vxe-icon-question-circle-fill",
                    },
                    itemRender: { name: "$input", props: { placeholder: "请输入创建人ID" } },
                },
                {
                    field: "category_id",
                    title: "商家类型",
                    span: 6,
                    // options: [{ label: "满减", value: "mj" }, { label: "折扣", value: "zk" }]
                    itemRender: {
                        name: "$select",
                        props: { placeholder: "类型" },
                        options: categories.value.map(item => {
                            return {
                                label: item.title,
                                value: item.id
                            }
                        })
                    },
                },
                {
                    field: "tel",
                    title: "联系电话",
                    span: 6,

                    itemRender: { name: "$input", props: { placeholder: "联系电话" } },
                },
                {
                    field: "address",
                    title: "地址",
                    span: 6,
                    itemRender: { name: "$input", props: { placeholder: "地址" } },

                },

                {
                    field: "business_hours",
                    title: "营业时间",
                    span: 6,
                    folding: true,
                    titlePrefix: {
                        message: "请输入日期",
                        icon: "vxe-icon-question-circle-fill",
                    },
                    //渲染时间选择器
                    itemRender: {
                        name: "$input",
                        props: {
                            type: "datetime",
                            placeholder: "请输入时间",
                            startPlaceholder: "开始时间",
                            endPlaceholder: "结束时间",
                        }
                    }
                },
                {
                    span: 24,
                    align: "left",
                    collapseNode: true,
                    itemRender: {
                        name: "$buttons",
                        children: [
                            {
                                props: {
                                    type: "submit",
                                    content: "搜索",
                                    status: "primary",
                                },
                            },
                            { props: { type: "reset", content: "重置" } },
                        ],
                    },
                },
            ],
        },
        stripe: true,
        id: "full_edit_9999",
        rowConfig: {
            keyField: "#",
            isHover: true,
            useKey: true,
        },
        columnConfig: {
            resizable: true,
        },
        customConfig: {
            storage: true,
            checkMethod({ column }) {
                if (["name", "no"].includes(column.field)) {
                    return false;
                }
                return true;
            },
        },
        printConfig: {
            columns: [
                { field: "name" },
            ],
        },
        sortConfig: {
            trigger: "cell",
            remote: true,
        },
        filterConfig: {
            remote: true,
        },
        pagerConfig: {
            enabled: true,
            pageSize: 10,
            pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
        },

        toolbarConfig: {
            buttons: [
                // {code: "insert_actived", name: "快捷新增", status: "primary"},
                // {code: "delete", name: "直接删除", status: "danger"},
                // {code: "mark_cancel", name: "删除/取消"},
                // {code: "save", name: "保存", status: "success"},
            ],
            refresh: true, // 显示刷新按钮
            import: false, // 显示导入按钮
            export: true, // 显示导出按钮
            print: true, // 显示打印按钮
            zoom: true, // 显示全屏按钮
            custom: true, // 显示自定义列按钮
        },
        proxyConfig: {
            seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
            sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
            filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
            form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
            props: {
                // 对应响应结果 Promise<{ result: [], page: { total: 100 } }>
                result: "data", // 配置响应结果列表字段
                total: "total", // 配置响应结果总页数字段
            },
            // 只接收Promise，具体实现自由发挥
            ajax: {
                // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
                query: ({ page, sorts, filters, form }) => {
                    const queryParams: any = Object.assign({}, form);
                    // 处理排序条件
                    const firstSort = sorts[0];
                    if (firstSort) {
                        queryParams.sort = firstSort.field;
                        queryParams.order = firstSort.order;
                    }
                    // 处理筛选条件
                    filters.forEach(({ field, values }) => {
                        queryParams[field] = values.join(",");
                    });

                    return http.request({
                        url: `/merchant/list?pageSize=${page.pageSize}&currentPage=${page.currentPage}&${XEUtils.serialize(queryParams)}`,
                        method: "GET",
                    })
                },
            },
        },
        columns: [
            { field: "id", title: "ID", width: 100 },
            {
                field: "user_id",
                title: "创建人ID",
                width: 120,
                sortable: true,
                titlePrefix: { message: "编号必须填写！" },
            },
            {
                field: "catename",
                title: "商家类型",
                width: 120,
                titlePrefix: { message: "商家类型" },
            },
            // 配置日期选择器
            {
                field: "name",
                title: "商家名称",
                sortable: true,
                width: 200,
                titlePrefix: { message: "商家名称" },
            },
            {
                field: "tel",
                title: "电话",
                //当为in是显示登录，out时显示退出
                sortable: true,
                width: 200,
            },
            {
                field: "logo",
                title: "LOGO",
                width: 100,
                // 显示图片
                slots: {
                    default: "logslot"
                },
            },
            {
                field: "status",
                title: "状态",
                width: 100,
                sortable: true,
                //当为in是显示登录，out时显示退出
                slots: {
                    default: "statusSlot"
                }
            },
            {
                field: "address",
                title: "地址",
                //当为in是显示登录，out时显示退出
                sortable: true,
            },
            {
                field: "discount",
                title: "优惠",
                width: 300,
                slots: {
                    default: "discountSlot"
                }
            },
            {
                field: "business_hours",
                title: "营业时间",
                //当为in是显示登录，out时显示退出
                sortable: true,
            },
            {
                field: "recommend",
                title: "推荐值",
                //当为in是显示登录，out时显示退出
                sortable: true,
            },
            {
                title: "操作",
                width: 500,
                slots: {
                    default: "action"
                },
            },
        ],
        importConfig: {

        },
        exportConfig: {

        },
        checkboxConfig: {
            labelField: "ID",
            checkStrictly: true,
        },
        editRules: {
            name: [
                { required: true, message: "必填" },
                { min: 3, max: 50, message: "名称长度在 3 到 50 个字符" },
            ],
            no: [{ required: true, message: "必填" }],
        },
        editConfig: {
            trigger: "click",
            mode: "row",
            showStatus: true,
            showUpdateStatus: true,
            showInsertStatus: true,
            autoClear: true,
        },
    });

    return { gridOptions }
}


